<template>
  <div class="app-container zcfg">
    <div class="newTextBox u-base-fg">
      <div class="newTit u-prim-text">
        <!-- <span>NEW</span> -->
        <img src="@/assets//images/news.png" alt="" />
        {{ tableData?.rows?.[0]?.informationName | nullishCoalescing }}
      </div>
      <div class="newCont">
        {{ tableData?.rows?.[0]?.informationContent | nullishCoalescing }}
      </div>
      <div class="newLY u-df-st">
        <span>文章来源：{{ tableData?.rows?.[0]?.informationPublishPeople | nullishCoalescing }}</span>
        <span class="u-ml10 u-mr10">|</span>
        <span>发布日期：{{ tableData?.rows?.[0]?.informationCreateTime | nullishCoalescing }}</span>
      </div>
    </div>
    <div class="newListBox u-base-fg">
      <div class="listTit">
        <div class="u-prim-text">政策法规</div>
        <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData?.rows ?? []"
        style="width: 100%"
        :show-header="false"
        @row-click="handlePreview"
        :height="300"
      >
        <el-table-column prop="informationName">
          <template slot-scope="scope">
            <span class="icon"></span>
            <span>{{ scope.row.informationName | nullishCoalescing }}</span>
          </template>
        </el-table-column>
        <el-table-column width="500">
          <template slot-scope="scope">
            <div class="u-df-ed">
              <span>文章来源：{{ scope.row.informationPublishPeople | nullishCoalescing }}</span>
              <span class="u-ml10 u-mr10">|</span>
              <span>发布日期：{{ scope.row.informationCreateTime | nullishCoalescing }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tableData?.total > 0"
        :total="tableData?.total ?? 0"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog :visible.sync="open" width="90%" height="" top="50px !important" title="查看" append-to-body>
      <iframe :src="openUrl" width="100%" height="700px" style="border: 0" />
    </el-dialog>
    <el-dialog
      :visible.sync="addOpen"
      :before-close="cancel"
      center
      width="50%"
      append-to-body
      custom-class="zixun-modal"
    >
      <div slot="title" class="dialog-title u-df-st">
        <span class="tit">新增-</span>
        <span class="tit_con">资讯信息</span>
      </div>
      <el-form :model="queryParamsAdd" ref="queryFormAdd" class="addForm" label-position="left" label-width="120px">
        <el-form-item label="资讯类型" prop="informationType">
          <el-select
            class="el-input_search"
            v-model="queryParamsAdd.informationType"
            placeholder="请选择"
            clearable
            size="small"
            style="width: 80% !important"
          >
            <el-option v-for="dict in informationTypes" :key="dict.code" :label="dict.name" :value="dict.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="资讯标题" prop="informationName">
          <el-input
            class="el-input_search"
            v-model="queryParamsAdd.informationName"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 80% !important"
          />
        </el-form-item>
        <el-form-item label="资讯来源" prop="informationPublishPeople">
          <el-input
            class="el-input_search"
            v-model="queryParamsAdd.informationPublishPeople"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 80% !important"
          />
        </el-form-item>
        <el-form-item label="资讯内容简介" prop="informationContent">
          <el-input
            v-model="queryParamsAdd.informationContent"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            placeholder="请输入资讯内容简介"
            style="width: 80% !important"
          />
        </el-form-item>
        <el-form-item label="文件上传" prop="url">
          <div class="u-df-st">
            <el-upload
              ref="uploadRef"
              accept=".pdf"
              :limit="1"
              :headers="upload.headers"
              :action="upload.url"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :file-list="fileLists"
            >
              <el-button type="primary" plain size="small" icon="el-icon-upload2">资讯上传</el-button>
            </el-upload>
            <div class="u-df-st u-ml30">
              <i class="el-icon-warning-outline u-fs14"></i>
              <span class="u-fs12" style="margin-left: 3px">上传资讯文章正文内容，PDF文件</span>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { Message } from 'element-ui';
import { getToken } from '@/utils/auth';
import { useRequest } from '@/hooks/requestHooks';
import { useGlobalState } from '@/store/globalState.js';
import { useResetForm } from '@/hooks/tool.js';
import { getNewsInfor, addNewsInfor } from '@/api/index.js';
const addOpen = ref(false);
const open = ref(false);
const uploadRef = ref(null);
const queryFormAdd = ref(null);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  informationType: 'POLITICS',
});
const queryParamsAdd = ref({
  queryParamsAdd: '',
  informationName: '',
  informationPublishPeople: '',
  informationContent: '',
  url: '',
});
const openUrl = ref('');
const upload = ref({
  isUploading: false,
  headers: { Authorization: 'Bearer ' + getToken() },
  url: useGlobalState().globalState.fileUrl + '/file/uploadFile',
});
const fileLists = ref([]);
const informationTypes = ref([
  { code: 'POLITICS', name: '政法政规' },
  { code: 'HOTSPOT', name: '热点咨询' },
  { code: 'INDUSTRY', name: '行业知识' },
]);
const [tableData, loading, run] = useRequest(getNewsInfor, {
  defaultParams: [queryParams.value],
});
const [addNews, , addRun] = useRequest(addNewsInfor, {
  defaultParams: [],
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      Message.success('新增成功');
      cancel();
      run(queryParams.value);
    }
  },
});
const getList = () => {
  run(queryParams.value);
};
const handleAdd = () => {
  addOpen.value = true;
};
const handlePreview = row => {
  open.value = true;
  openUrl.value = `${useGlobalState().globalState.fileUrl}${row.url}`;
};
const handleFileUploadProgress = () => {
  upload.value.isUploading = true;
};
const handleFileSuccess = (response, file, fileList) => {
  if (response.code === 200) {
    upload.value.isUploading = false;
    queryParamsAdd.value.url = response.data.url;
  }
};
const cancel = () => {
  addOpen.value = false;
  useResetForm(queryFormAdd);
  fileLists.value = [];
};
const save = () => {
  queryFormAdd.value.validate(valid => {
    if (valid) {
      addRun(queryParamsAdd.value);
    } else {
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
.newTextBox {
  width: 100%;
  height: 260px;
  box-shadow: 0px 1px 2px 1px rgba(37, 37, 37, 0.08);
  opacity: 1;
  padding: 20px;
  box-sizing: border-box;
}
.newTit {
  font-size: 24px;
  font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
  font-weight: 600;
  line-height: 32px;
  span {
    font-size: 30px;
    color: #5bd4ff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana,
      sans-serif;
  }
  img {
    position: relative;
    top: 5px;
  }
}
.newCont {
  margin-top: 10px;
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #999;
  line-height: 32px;
}
.newLY {
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #545a6c;
  line-height: 32px;
  position: relative;
  top: 45px;
}
.newListBox {
  margin-top: 15px;
  width: 100%;
  height: calc(100% - 275px);
  box-shadow: 0px 1px 2px 1px rgba(37, 37, 37, 0.08);
  opacity: 1;
  padding: 20px;
  box-sizing: border-box;
}
.listTit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 0 10px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #2a3c60;
  div {
    font-size: 18px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    line-height: 0px;
  }
}
.icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #87a5bc;
  border-radius: 7px 7px 7px 7px;
  opacity: 0.6;
  margin-right: 10px;
}
.app-dark .addForm ::v-deep(.el-textarea__inner) {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #262f48;
}
</style>
